<script setup lang="ts">
import { isCollapse, width1, width2 } from './collapse'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { useUserStore } from '@/stores'
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const defaultActive = ref(route.path)
// 路由tabs切换时更新默认激活菜单
onBeforeRouteUpdate((to, from) => {
  defaultActive.value = to.path
})
// console.log(userStore.userInfo.menus);
const asideMenus = userStore.userInfo.menus
// const ruleNames = userStore.userInfo.ruleNames

function handleSelect(key: string) {
  router.push(key)
}
</script>

<template>
  <div class="f-menu" :style="{ width: isCollapse ? width2 : width1 }">
    <el-menu
      unique-opened
      :default-active="defaultActive"
      :collapse="isCollapse"
      class="el-menu"
      :collapse-transition="false"
      @select="handleSelect"
    >
      <template v-for="(item, index) in asideMenus" :key="index">
        <el-sub-menu v-if="item.child && item.child.length" :index="item.name">
          <template #title>
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span class="title">{{ item.name }}</span>
          </template>
          <el-menu-item v-for="(item2, index2) in item.child" :index="item2.frontpath" :key="index2">
            <el-icon>
              <component :is="item2.icon" />
            </el-icon>
            {{ item2.name }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.frontpath">
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <span class="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.f-menu {
  // width: 250px;
  background-color: #fdfdfd;
  position: fixed;
  top: 64px;
  bottom: 0px;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.2s ease;

  // 取消1px边框线
  .el-menu {
    border: 0;
  }
}

// 关闭滚动条
.f-menu::-webkit-scrollbar {
  width: 0px;
}
</style>
